<template>
  <div class="same-name">
    <div class="box">
      <div style="height: 100%;">
        <div class="same-name-header">
          <div class="lf">
            <el-button class="lf" @click="goBack">
              <i class="iconfont icon-arrow-left"></i>
            </el-button>
            <!--<div class="lf" v-show="isActive">
              <el-input
                clearable
                placeholder="筛选条件"
                prefix-icon="el-icon-search"
                v-model="input21">
              </el-input>
            </div>-->
          </div>
          <!--<div class="rf">-->
          <!--<span class="btns">-->
          <!--<span :class="{ active: isActive }" @click="toggleTab">-->
          <!--<i class="iconfont icon-list"></i>列表-->
          <!--</span><span :class="{ active: !isActive }" @click="toggleTab">-->
          <!--<i class="iconfont icon-portrait"></i>画像-->
          <!--</span>-->
          <!--</span>-->
          <!--</div>-->
        </div>
        <div class="same-name-body">
          <!--列表-->
          <div class="list" v-show="isActive">
            <el-table
              :data="userList"
              border
              style="width: 100%">
              <el-table-column
                min-width="150"
                header-align="center"
                align="center"
                v-for="item in userTableHead"
                :key="item.key"
                :prop="item.key"
                :label="item.value">
              </el-table-column>
              <el-table-column
                v-if="userTableHead.length > 0"
                fixed="right"
                header-align="center"
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <el-button @click="goUserDetail(scope.row)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNo"
              :page-sizes="[5, 10, 15, 20, 1, 2]"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="totalNum">
            </el-pagination>
          </div>
          <!--画像-->
          <div class="portrait" v-show="!isActive" id="bodyWidth">
            <div class="user-environment">
              <p class="head font16">
                用户环境
                <i class="iconfont icon-question-full"></i>
              </p>
              <div class="body">
                <ul>
                  <li v-for="n in graph" :key="n.key" :class="{ twoLi: !isBig, threeLi: isBig }">
                    <chart :options="n"></chart>
                  </li>
                </ul>
              </div>
            </div>
            <div class="user-environment">
              <p class="head font16">
                用户环境
                <i class="iconfont icon-question-full"></i>
              </p>
              <div class="body">
                <ul>
                  <li v-for="n in graph" :key="n.key" :class="{ twoLi: !isBig, threeLi: isBig }">
                    <chart :options="n"></chart>
                  </li>
                </ul>
              </div>
            </div>
            <div class="user-environment">
              <p class="head font16">
                用户环境
                <i class="iconfont icon-question-full"></i>
              </p>
              <div class="body">
                <ul>
                  <li v-for="n in graph" :key="n.key" :class="{ twoLi: !isBig, threeLi: isBig }">
                    <chart :options="n"></chart>
                  </li>
                </ul>
              </div>
            </div>
            <div class="user-environment">
              <p class="head font16">
                用户行为
                <i class="iconfont icon-question-full"></i>
              </p>
              <div class="body">
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="event_name"
                    label="事件"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    v-for="item in eventTableHead"
                    :key="item.key"
                    :prop="item.key"
                    :label="item.value">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import ajax from '../../api/ajax/ajax'
  import store from '@/store'
  import api from '../../api/url'

  const ajaxFun = (obj, vm) => {
    ajax.post(api.SELECT_ANALYSE_USER_OBJECT_LIST, obj).then(res => {
      vm.getUserList(res.data)
    })
  }

  export default {
    props: {
      selectStranCode: {
        type: String
      },
      title: {
        type: String
      },
      pageName: {
        type: String
      }
    },
    data () {
      return {
        input21: '',
        isActive: true,
        tableData: [],
        isBig: true,
        w: 0,
        userList: [],
        userTableHead: [],
        pageSize: 10,
        pageNo: 1,
        totalNum: null,
        eventTableHead: [],
        graph: {
          option1: {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#016DFB'
                }
              }
            }]
          },
          option2: {
            xAxis: {
              type: 'category',
              data: ['20180401', '20180402', '20180403', '20180404', '20180405', '20180406', '20180407']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [55, 66, 77, 88, 99, 111, 122],
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#016DFB'
                }
              }
            }]
          },
          option3: {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [89.3, 92.1, 94.4, 85.4, 95.4, 108.8, 128.9],
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#016DFB'
                }
              }
            }]
          }
        }
      }
    },
    computed: {
      currentPageData () {
        return store.state.currentPageData
      }
    },
    watch: {
      isActive (val) {
        if (val === false) {
          setTimeout(() => {
            this.w = document.getElementById('bodyWidth').offsetWidth
            if (this.w > 1333) {
              this.isBig = true
            } else {
              this.isBig = false
            }
          }, 20)
        }
      }
    },
    methods: {
      // 切换每页条数
      handleSizeChange (val) {
        this.pageNo = 1
        this.pageSize = val
        this.currentPageData.page.pageNo = this.pageNo
        this.currentPageData.page.pageSize = this.pageSize
        ajaxFun(this.currentPageData, this)
      },
      // 切换页数
      handleCurrentChange (val) {
        this.pageNo = val
        this.currentPageData.page.pageNo = this.pageNo
        ajaxFun(this.currentPageData, this)
      },
      getUserList (obj) {
        this.totalNum = parseInt(obj.total)
        this.userList = obj.list
        const META_COLUME = JSON.parse(sessionStorage.getItem('commonData')).META_COLUME
        this.userTableHead = []
        if (this.userList.length > 0) {
          for (let k in this.userList[0]) {
            if (this.userList[0][k] === 'null') {
              this.userList[0][k] = ''
            }
            if (k.indexOf('__S__') !== -1) {
              META_COLUME.forEach(item => {
                if (k.split('__')[0] === item.meta_id) {
                  let obj = {}
                  obj.key = k
                  obj.value = item.colume_chs
                  this.userTableHead.push(obj)
                }
              })
            }
          }
        }
      },
      toggleTab () {
        if (this.isActive) {
          this.isActive = false
          let paramsData = JSON.parse(sessionStorage.getItem('paramsData'))
          const META_TGT = JSON.parse(sessionStorage.getItem('commonData')).META_TGT
          this.eventTableHead = []
          ajax.post(this.selectStranCode, paramsData).then(res => {
            this.tableData = res.data
            let obj = this.tableData[0]
            for (let k in obj) {
              if (k.indexOf('__GF__') !== -1) {
                META_TGT.forEach(item => {
                  if (k.split('_')[1] === item.meta_id) {
                    let obj = {}
                    obj.key = k
                    obj.value = item.tgt_name
                    this.eventTableHead.push(obj)
                  }
                })
              }
            }
          })
        } else {
          this.isActive = true
        }
      },
      goBack () {
        store.commit('updateToggleValue', this.backPageName || 'index')
        this.$emit('goBack')
      },
      goUserDetail (row, event, column) {
        store.commit('updateToggleValue', this.pageName)
        store.commit('pb_updateUserDetailObj', row)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .same-name
    height 100%
    .box
      height 100%
      .same-name-header
        padding-bottom 10px
        height 40px
        .lf
          .el-button
            width 30px
            height 30px
            padding 0
            margin-right 20px
            i.icon-arrow-left
              color #878D99
          .el-input
            width 200px
            height 30px
            margin-right 20px
        .rf
          .el-dropdown
            width 50px
            height 30px
            border 1px solid #D8DCE5
            border-radius 4px
            text-align center
            line-height 30px
            margin-right 10px
            .icon-screen
              color #B4BCCC
              font-size 14px
          .btns
            span
              display inline-block
              width 64px
              height 30px
              line-height 30px
              text-align center
              border 1px solid #D8DCE5
              font-size 12px
              color #5A5E66
              cursor pointer
              i.iconfont
                font-size 12px
                color #5A5E66
                margin-right 5px
            .active
              background #EDF2FC
            span:first-child
              border-right transparent
              border-top-left-radius 4px
              border-bottom-left-radius 4px
            span:last-child
              border-top-right-radius 4px
              border-bottom-right-radius 4px
      .same-name-body
        .list
          .el-table__header
            .has-gutter
              width 100%
              tr
                width 100%
        .portrait
          .user-environment
            .head:before
              content ''
              display inline-block
              width 6px
              height 30px
              background #016DFB
              position absolute
              left 0
              top 0
            .head
              height 30px
              line-height 30px
              padding-left 20px
              position relative
              margin 10px 0
              i.iconfont
                color #8BC4FF
            .body
              li
                float left
                height 360px
                background #eee
              .twoLi
                width calc(50% - 10px)
              .twoLi:nth-child(2n + 1)
                margin 10px 10px 10px 0
              .twoLi:nth-child(2n)
                margin 10px 0 10px 10px
              .threeLi
                width calc(33.33% - 13.34px)
              .threeLi:nth-child(2n + 1)
                margin 10px 10px 10px 0
              .threeLi:nth-child(2n)
                margin 10px
              .threeLi:nth-child(2n + 1)
                margin 10px
              .threeLi:nth-child(3n)
                margin 10px 0 10px 10px
              .threeLi:nth-child(3n + 1)
                margin 10px 10px 10px 0
</style>
